<template>
  <div style="padding: 0 24px">
    <!--应用信息表头-->
    <div>
      <a-page-header @back="() => {}">
        <template #title>
          <span :title="softwareName" class="pointer">{{softwareName}}</span>
          <div class="app-description">Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目</div>
        </template>
        <template #backIcon>
          <img src='../../assets/tomcat.png' :alt='softwareName' width="48"/>
        </template>
        <template #extra>
          <a-button type="primary" icon="deployment-unit" @click="deploy(id)">部署</a-button>
        </template>
      </a-page-header>
    </div>
<!--    信息内容-->
    <div>
      <a-tabs v-model="activeTab" :animated="false" @change="() => {}">
        <a-tab-pane key="1" tab="应用信息" style="padding-left: 24px">
          <a-row>
            <a-col :span="15">
              <a-descriptions title="介绍">
                <span>暂无介绍</span>
              </a-descriptions>
              <a-descriptions title="截图">
                <span>无</span>
              </a-descriptions>
              <a-descriptions title="版本(只显示10个最新的版本)">
                <a-descriptions-item>
                  <a-table :columns="versionColumns"
                           :dataSource="rows"
                           size="middle">
                  </a-table>
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :span="9">
              <a-descriptions title="基本信息" :column="1">
                <a-descriptions-item label="类别">
                  {{basicInfo.type}}
                </a-descriptions-item>
                <a-descriptions-item label="首页">
                  {{basicInfo.url}}
                </a-descriptions-item>
                <a-descriptions-item label="上架时间">
                  {{basicInfo.releaseTime}}
                </a-descriptions-item>
                <a-descriptions-item label="软件编号">
                  {{basicInfo.softWareId}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="应用详情" style="padding-left: 24px">
          <a-row>
            <a-col :span="15">
              <a-tabs type="card" @change="callback" class="subtabs">
                <a-tab-pane key="1" tab="应用描述">
                  暂无
                </a-tab-pane>
                <a-tab-pane key="2" tab="配置文件">
                  暂无
                </a-tab-pane>
              </a-tabs>
            </a-col>
            <a-col :span="9">
              <a-descriptions title="版本">
                <a-descriptions-item>
                  <a-select size="large" default-value="0.4.3 [8.5.41]" style="width: 200px">
                    <a-select-option v-for="version in versions" :key="version.id">
                      {{ version.id }}
                    </a-select-option>
                  </a-select>
                </a-descriptions-item>

              </a-descriptions>
              <a-descriptions title="关键字">
<!--                大概想用tag-->
                <span>无</span>
              </a-descriptions>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
  const versionColumns = [
    {
      title: '版本号',
      key: 'version',
      dataIndex: 'version',
      width: 100,
    },
    {
      title: '发布时间',
      key: 'releaseTime',
      dataIndex: 'releaseTime',
      width: 100
    },
    {
      title: '更新日志',
      key: 'log',
      dataIndex: 'log',
      width: 300,
    }

  ]

	export default {
		name: "SoftwareDetail",

    props: {
		  //软件id
		  id: Number,
    },

    data() {
		  return {
		    softwareName: 'Tomcat',

        activeTab: "1",

        versionColumns,

        //写个内容的格式
        basicInfo: {
		      type: 'Web Server',
          url: '',
          releaseTime: '2021年05月24日',
          softWareId: 'app-47x73xx616987x-store',
        },

        rows: [],

        //发布的各个版本的信息
        versions: [
          {
            id: "0.4.3 [8.5.41]",
            releaseTime: "2021年05月24日",
          }
        ],

      }
    },

    methods: {
      deploy(id) {
        this.$router.push(`/software-shop/install/${id}`)
      }
    },
	}
</script>

<style scoped>
  /deep/.ant-tabs .ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    height: 30px;
    width: 150px;
    margin: 0;
    border: 1px solid #fff;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: small;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
  }

  /deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
    height: 30px;
    color: #fff;
    background: #1890ff;
    border: 1px solid #1890ff;
    border-radius: 20px;
  }

  /deep/ .ant-form-item-label {
    line-height: 20px;
  }
  /deep/ .ant-form-item {
    font-size: 13px;
  }
  .app-description {
    font-size: 13px;
    color: #79879c;
    font-weight: normal;
    line-height: 13px;
  }
  /deep/ .ant-page-header-heading-title {
    width: 50%;
  }

  /deep/ .subtabs .ant-tabs-bar {
    margin: 0 0 16px;
    border-bottom: 0;
    outline: none;
  }
  /deep/.subtabs .ant-tabs-nav {
    border: 1px solid #a8a5a5;
    border-radius: 25px;
    width: 304px;
    padding: 1px;
  }
</style>
